<template>
  <el-dialog
    :model-value="visible"
    :title="title"
    :width="560"
    :before-close="handleClose"
  >
    <el-form
      ref="editForm"
      :model="editParams"
      :rules="rules"
      :label-width="120"
      class="normal"
    >
      <el-form-item
        prop="ruleName"
        label="规则名称:"
      >
        <el-input
          v-model="editParams.ruleName"
          placeholder="请输入规则名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="描述:">
        <el-input
          v-model="editParams.describe"
          placeholder="请输入描述"
          clearable
        />
      </el-form-item>
      <el-form-item
        prop="frequency"
        label="调用次数:"
      >
        <el-input
          v-model="editParams.frequency"
          placeholder="请输入调用次数"
          clearable
        />
      </el-form-item>
      <el-form-item
        prop="status"
        label="状态:"
      >
        <el-select
          v-model="editParams.status"
          placeholder="请选择状态"
          clearable
          filterable
        >
          <el-option
            label="开启"
            :value="1"
          />
          <el-option
            label="关闭"
            :value="2"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        prop="useTime"
        label="调用时间:"
      >
        <el-date-picker
          v-model="editParams.useTime"
          type="date"
          placeholder="选择调用时间"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button
          v-blur
          @click="handleClose"
        >
          关闭
        </el-button>
        <el-button
          v-blur
          type="primary"
          @click="submitHandle"
        >
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts">
import {
  defineComponent, reactive, toRefs, watch, ref,
} from 'vue';

import { ElMessage } from 'hive-plus';

  interface State {
    title: string,
    editParams: TypeObject,
    rules: TypeObject
  }

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: () => ({}),
    },
  },
  emits: ['update:visible'],
  setup(props, { emit }) {
    const editForm = ref();
    const state:State = reactive({
      title: '添加规则',
      editParams: {},
      rules: {
        ruleName: [
          {
            required: true,
            message: '请输入规则名称',
            trigger: 'blur',
          }
        ],
        frequency: [
          {
            required: true,
            message: '请输入调用次数',
            trigger: 'blur',
          }
        ],
        status: [
          {
            required: true,
            message: '请选择状态',
            trigger: 'blur',
          }
        ],
        useTime: [
          {
            type: 'date',
            required: true,
            message: '请选择调用时间',
            trigger: 'change',
          }
        ],
      },
    });
    watch(
      () => props.visible,
      (val) => {
        if (val) {
          state.title = props.isEdit ? '配置规则' : '添加规则';

          if (Object.keys(props.params).length > 0) {
            state.editParams = { ...props.params };
          }
        }
      },
      {
        immediate: true,
      }
    );

    const submitHandle = () => {
      editForm.value.validate((valid: boolean) => {
        if (valid) {
          ElMessage.success(`success submit:${JSON.stringify(state.editParams)}`);
        } else {
          ElMessage.error('error submit');
        }
      });
    };

    return {
      ...toRefs(state),
      editForm,
      handleClose: () => {
        emit('update:visible', false);
        editForm.value.resetFields();
      },
      submitHandle,
    };
  },
});
</script>
